<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圈子</title>
</head>
<body>
    <div class="app-circle dpflex fdcolumn">
        <!-- 顶部菜单栏 -->
        <div class="circle-menu">
            <div id="menuBox" class="menu-box  dpflex">
                <p class="menu-active">关注</p>
                <p>附近</p>
                <p>收藏</p>
                <p>个人动态</p>
            </div>
        </div>
        <button id="jumpBtn">添加 +</button>
        <!-- 选项卡盒子内容 -->
        <ul id="menuContent" class="content-box dpflex">
            <!-- 关注 -->
            <li class="on">
                <div class="search">
                    <i class="iconfont icon-search"></i>
                    <input type="text" placeholder="搜索">
                </div>
                <div class="user-head">
                    <div class="user">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>用户名</span>
                        <a href="#">已关注</a>
                    </div>
                    <div class="user">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>用户名</span>
                        <a href="#">互相关注</a>
                    </div>
                    <div class="user">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>用户名</span>
                        <a href="#">已关注</a>
                        <div class="vip"><em>vip</em></div>
                    </div>
                </div>
            </li>
            <!-- 附近 -->
            <li class="nearby">
                <div class="nearby-one">
                    <div class="header">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>
                            <i>用户名</i>
                            <em>xx省, xx市</em>
                        </span>
                        <p>+关注</p>
                    </div>
                    <p>有这么一句话: "生命在于运动。"对没错, 运动不但可以锻炼我们的身体, 还能充实我们的生活, 愉悦我们的心情。我最喜欢的一项运动就是晨跑。<span>...全部</span></p>
                    <div class="img-list dpflex">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                    </div>
                    <div class="leaving-message dpflex">
                        <span>4小时之前</span>
                        <div>
                            <i class="iconfont icon-great"></i>
                            <span>9999</span>

                            <i class="iconfont icon-talk"></i>
                            <span>9999</span>
                        </div>
                    </div>
                </div>
                <div class="nearby-two">
                    <div class="header">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>
                            <i>用户名</i>
                            <em>xx省, xx市</em>
                        </span>
                        <p>+关注</p>
                    </div>
                    <p>有这么一句话: "生命在于运动。"对没错, 运动不但可以锻炼我们的身体, 还能充实我们的生活, 愉悦我们的心情。我最喜欢的一项运动就是晨跑。<span>...全部</span></p>
                    <div class="img-list dpflex">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                    </div>
                    <div class="leaving-message dpflex">
                        <span>4小时之前</span>
                        <div>
                            <i class="iconfont icon-great"></i>
                            <span>9999</span>

                            <i class="iconfont icon-talk"></i>
                            <span>9999</span>
                        </div>
                    </div>
                </div>
                <div class="nearby-two">
                    <div class="header">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>
                            <i>用户名</i>
                            <em>xx省, xx市</em>
                        </span>
                        <p>+关注</p>
                    </div>
                    <p>有这么一句话: "生命在于运动。"对没错, 运动不但可以锻炼我们的身体, 还能充实我们的生活, 愉悦我们的心情。我最喜欢的一项运动就是晨跑。<span>...全部</span></p>
                    <div class="img-list dpflex">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                    </div>
                    <div class="leaving-message dpflex">
                        <span>4小时之前</span>
                        <div>
                            <i class="iconfont icon-great"></i>
                            <span>9999</span>

                            <i class="iconfont icon-talk"></i>
                            <span>9999</span>
                        </div>
                    </div>
                </div>
            </li>
            <!-- 收藏 -->
            <li class="nearby">
                <div class="nearby-one">
                    <div class="header">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>
                            <i>用户名</i>
                            <em>xx省, xx市</em>
                        </span>
                        <p>+关注</p>
                    </div>
                    <p>有这么一句话: "生命在于运动。"对没错, 运动不但可以锻炼我们的身体, 还能充实我们的生活, 愉悦我们的心情。我最喜欢的一项运动就是晨跑。<span>...全部</span></p>
                    <div class="img-list dpflex">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                    </div>
                    <div class="leaving-message dpflex">
                        <span>4小时之前</span>
                        <div>
                            <i class="iconfont icon-great special"></i>
                            <span>9999</span>

                            <i class="iconfont icon-talk"></i>
                            <span>9999</span>
                        </div>
                    </div>
                </div>
                <div class="nearby-two">
                    <div class="header">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>
                            <i>用户名</i>
                            <em>xx省, xx市</em>
                        </span>
                        <p>+关注</p>
                    </div>
                    <p>有这么一句话: "生命在于运动。"对没错, 运动不但可以锻炼我们的身体, 还能充实我们的生活, 愉悦我们的心情。我最喜欢的一项运动就是晨跑。<span>...全部</span></p>
                    <div class="img-list dpflex">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                    </div>
                    <div class="leaving-message dpflex">
                        <span>4小时之前</span>
                        <div>
                            <i class="iconfont icon-great special"></i>
                            <span>9999</span>

                            <i class="iconfont icon-talk"></i>
                            <span>9999</span>
                        </div>
                    </div>
                </div>
                <div class="nearby-two">
                    <div class="header">
                        <img src="../imgs/dog.jpg" alt="">
                        <span>
                            <i>用户名</i>
                            <em>xx省, xx市</em>
                        </span>
                        <p>+关注</p>
                    </div>
                    <p>有这么一句话: "生命在于运动。"对没错, 运动不但可以锻炼我们的身体, 还能充实我们的生活, 愉悦我们的心情。我最喜欢的一项运动就是晨跑。<span>...全部</span></p>
                    <div class="img-list dpflex">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                        <img src="../imgs/dog.jpg" alt="">
                    </div>
                    <div class="leaving-message dpflex">
                        <span>4小时之前</span>
                        <div>
                            <i class="iconfont icon-great special"></i>
                            <span>9999</span>

                            <i class="iconfont icon-talk"></i>
                            <span>9999</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>456</li>
        </ul>
    </div>
</body>
</html>